<template>
    <div class="searchj-box">
      <div class="row">
        <div class="left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="queryRoleList">查询搜索</el-button>
        </div>
      </div>
      <div class="row">
        <span>角色名称:</span>
        <el-input
          placeholder="请输入角色名称"
          v-model="queryParams.keyword"
        ></el-input>
      </div>
    </div>
    <div class="add-area">
      <div class="row">
        <div class="add-left">
          <el-icon>
            <Tickets />
          </el-icon>
          <span>数据列表</span>
        </div>
        <div class="add-right">
          <el-button
            type="primary"
            @click="showDialog = true"
            v-permission="'addUser'"
            >添加</el-button
          >
        </div>
      </div>
    </div>
    <el-table
      :data="userList"
      border
      table-layout="auto"
      cell-class-name="align-c"
    >
      <el-table-column label="编号" prop="id" cell-class-name="align-c" />
      <el-table-column label="角色名称" prop="name" />
      <el-table-column label="描述" prop="description" />
      <el-table-column label="用户数" prop="adminCount" />
      <el-table-column label="添加时间" prop="createTime">
        <template #default="{ row }">
          <span>{{ formateDate(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" prop="status">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            @change="switchStatue(row)"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            text
            type="primary"
            @click="allocMenu(row.id)"
            v-permission="'allocRole'"
            >分配菜单</el-button
          >
          <el-button
            text
            type="primary"
            @click="router.push('/ums/allocResource?id=' + row.id)"
            >分配资源</el-button
          >
          <el-button
            text
            type="primary"
            @click="edit(row.id, row.name, row.description)"
            v-permission="'editRole'"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
      <div class="page">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="queryRoleList"
          @current-change="queryRoleList"
        />
      </div>
    </ElConfigProvider>
    <editRole
      :show="showDialog"
      @hide="closeDialog"
      @ShutDown="ShutDown"
      :id="editId"
      :name="editName"
      :description="editDescription"
    />
    <AllocRole :show="RoleList" :id="RoleId" @hide="closeRoleList" />
  </template>
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { RoleListAPI, switchRoleStatusAPI } from "@/request/api";
  import { Search, Tickets } from "@element-plus/icons-vue";
  import { ElConfigProvider, ElMessage } from "element-plus";
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  import { formateDate } from "@/utils";
  import editRole from "./editRole.vue";
  import AllocRole from "./allocRole.vue";
  import { useRouter } from "vue-router";
  const router = useRouter();
  
  // 布尔类型的变量，名称尽量语义化
  const RoleList = ref(false);
  const RoleId = ref(0);
  // 功能明显是要显示，就正常 方法名 动词+名词 ， 也 功能Handle
  // 下面这个函数是实现跳转到分配菜单页面
  const allocMenu = (id: number) => {
    console.log(12111);
  
    router.push("/ums/allocMenu?id=" + id);
  };
  
  const editId = ref(0);
  const editName = ref<string>();
  const editDescription = ref<string>();
  const edit = (id: number, name: string, description: string) => {
    showDialog.value = true;
    // 建议一次传递对象进去
    editId.value = id;
    editName.value = name;
    editDescription.value = description;
  };
  const closeRoleList = () => {
    RoleList.value = false;
    RoleId.value = 0;
    //   还要把其它传入父组件的数据，也重置
  };
  
  const showDialog = ref(false);
  const closeDialog = (isRolad?: boolean) => {
    showDialog.value = false;
    editId.value = 0;
    if (isRolad) queryRoleList();
  };
  const ShutDown = () => {
    showDialog.value = false;
  };
  const userList = ref<IRoleModel[]>([]);
  const switchStatue = (row: IRoleModel) => {
    switchRoleStatusAPI(row.id!, row.status)
      .then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功");
        } else {
          row.status = row.status === 1 ? 0 : 1;
        }
      })
      .catch(() => {
        row.status = row.status === 1 ? 0 : 1;
      });
  };
  const queryParams = reactive<IUserListParams>({
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  });
  
  const reset = () => {
    queryParams.keyword = "";
    // 重置分两种，一种是把 表单的内容相关的重置，    然后重新请求
    // 还有一种，连 pageNum和pageSize也重置
    queryRoleList();
  };
  
  const total = ref(0);
  const queryRoleList = () => {
    RoleListAPI(queryParams).then((res: { code: number; data: {
data: any;
code: number; list: { adminCount?: number | undefined; createTime?: string | undefined; description: string; id: number; name: string; sort?: number | undefined; status: 0 | 1; }[]; total: number; 
}; }) => {
      if (res.data.code === 200) {
        
        userList.value = res.data.data.list;
        total.value = res.data.data.total;
      }
    });
  };
  queryRoleList();
  </script>
  <style lang="less" scoped>
  :deep(.align-c) {
    .cell {
      text-align: center !important;
    }
  }
  .searchj-box {
    box-shadow: 0 0 4px #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    .row {
      padding: 10px 0;
      display: flex;
      &:first-child {
        justify-content: space-between;
      }
      &:last-child {
        width: 400px;
        span {
          width: 100px;
        }
      }
    }
  }
  .add-area {
    box-shadow: 0 0 4px #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    .row {
      padding: 2px 0;
      display: flex;
      &:first-child {
        justify-content: space-between;
      }
    }
  }
  .page {
    padding-top: 10px;
    display: flex;
    justify-content: center;
  }
  </style>
  